<template>
  <div>
    <div>
      <span>当前的时间是：</span>
      <!-- <span>{{ currentTime }}</span> -->
    </div>
    <div>
      <el-button @click="openDialog">打开二次弹窗</el-button>
    </div>
    <div>
      <el-button @click="goToDownload">去下载</el-button>
    </div>
    <div class="ecahrts-box">
      <ZhuZhuang ref="zhuZhuangRef" />
    </div>
    <div class="red-box" ref="redRef">
      <div class="green-box" ref="greenRef"></div>
      <!-- v-draggable -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useHandleData } from "@/hooks/useHandleData";
import { useDownload } from "@/hooks/useDownload";
import { useDaoJiShi } from "@/hooks/useDaoJiShi";
import { useEcharts } from "@/hooks/useEcharts";
import ZhuZhuang from "./components/zhuZhuang.vue";
import { useDraggable } from "@/hooks/use-draggable/useDraggable";

const zhuZhuangRef = ref();
const redRef = ref<HTMLElement>();
const greenRef = ref<HTMLElement>();
const curveData = [
  { value: 30, spotName: "掘金" },
  { value: 90, spotName: "CSDN" },
  { value: 10, spotName: "Gitee" },
  { value: 70, spotName: "GitHub" },
  { value: 20, spotName: "知乎" },
  { value: 60, spotName: "MyBlog" },
  { value: 55, spotName: "简书" },
  { value: 80, spotName: "StackOverFlow" },
  { value: 50, spotName: "博客园" }
];
useDraggable(redRef, greenRef, true);

onMounted(() => {
  zhuZhuangRef.value.initChart(curveData);
});

const { currentTime } = useDaoJiShi();

const serverGetExcel = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("foo");
    }, 300);
  });
};

const goToDownload = () => {
  useDownload(serverGetExcel, "文件名", {}, true, ".xlsx");
};

/**
 * 打开弹窗
 */
const openDialog = () => {
  useHandleData(serverGetExcel, { id: 1 }, "删除所选用户信息");
};
</script>

<style scoped lang="scss">
.ecahrts-box {
  height: 400px;
}
.red-box {
  background: red;
  width: 600px;
  height: 600px;
}
.green-box {
  background: green;
  width: 100px;
  height: 100px;
  // margin-left: 300px;
}
</style>
